<template>
  <section>
    <p>使用侦听器的方式：{{fullName}}</p>
    <p>使用计算属性的方式：{{fullName2}}</p>
    <p>使用计算属性的get set 访问器方式：{{fullName3}}</p>
    <p>
      <button v-on:click="onFirstNameChanged()">变更名字的第一个名字</button>
      <button v-on:click="onFullName3Changed()">变更全名</button>
    </p>
  </section>
</template>

<script>
export default {
  name: "VsWatch",
  data() {
    return {
      firstName: "Foo",
      lastName: "Bar",
      fullName: "Foo Bar"
    };
  },
  methods: {
    onFirstNameChanged() {
      this.firstName = "Boo";
    },
    onFullName3Changed() {
      this.fullName3 = "Goo Jar";
    }
  },
  watch: {
    firstName(val) {
      this.fullName = `${val} ${this.lastName}`;
    },
    lastName(val) {
      this.fullName = `${this.firstName} ${val}`;
    }
  },
  computed: {
    fullName2() {
      return `${this.firstName} ${this.lastName}`;
    },
    fullName3: {
      get() {
        return `${this.firstName} ${this.lastName}`;
      },
      set(value) {
        var names = value.split(" ");
        this.firstName = names[0];
        this.lastName = name[1];
      }
    }
  }
};
</script>